<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采集进度</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/stylenum.css">
    <link rel="stylesheet" href="../assets/css/jquery.treeview.css"/>
    <link rel="stylesheet" href="../assets/css/BeatPicker.min.css"/>
    <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/jquery.treeview.js" type="text/javascript"></script>
    <script src="../assets/js/BeatPicker.min.js"></script>
    <script src="../assets/js/common.js"></script>
    <script src="../assets/js/echarts.common.min.js"></script>
</head>
<body>
<div class="jg-main">
    <table cellspacing="0" cellpadding="0" class="jg-table">
        <tr>
            <td width="315" class="jg-table-tdname">选择要查看的指标</td>
            <td width="168">
                <select>
                    <option>应报数</option>
                    <option>已报数</option>
                    <option>未报数</option>
                    <option>上报率</option>
                    <option>直报率</option>
                    <option>直验率</option>
                    <option>验收率</option>
                    <option>验收率</option>
                </select>
            </td>
            <td width="155" class="jg-table-tdname">请选择图形显示方式</td>
            <td width="640"><select onchange="changeEchart(this);">
                <option>饼图</option>
                <option>柱图</option>
                <option>线图</option>
            </select>
                <span style="color: red;">说明：建议试用驻图或线图查看上报率、直线率、直验率、验收率</span>
            </td>
        </tr>
    </table>
</div>
<div id="main1" style="width: 600px;height:400px;margin: 50px auto 0;"></div>
<div id="main2" style="width: 1200px;height:400px;margin: 50px auto 0;display: none;"></div>
<div id="main3" style="width: 1200px;height:400px;margin: 50px auto 0;display: none;"></div>
<script>
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var option = {
        title: {
            text: '崇川区统计局',
            subtext: '注：其他统计机构无效',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '钟秀街道统计站'},
                    {value: 310, name: '学田街道统计站'},
                    {value: 234, name: '虹桥街道统计站'},
                    {value: 135, name: '任港街道统计站'},
                    {value: 1548, name: '文峰街道统计站'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var option2 = {
        title: {
            text: '崇川区统计局',
            subtext: '注：其他统计机构无效',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['学田街道', '虹桥街道', '任港街道', '和平桥街道', '城东街道', '钟秀街道', '南通崇川区', '观音山街道', '文峰街道', '狼山镇街道'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                max: 40,
                min: 0,
                interval: 8
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '40%',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [{
                    value: 5,
                    name: '学田街道统计站',
                    itemStyle: {
                        normal: {
                            color: '#559ed1'
                        }
                    }
                },
                    {
                        value: 2,
                        name: '虹桥街道统计站',
                        itemStyle: {
                            normal: {
                                color: '#fedebc'
                            }
                        }
                    },
                    {
                        value: 16,
                        name: '任港街道统计站',
                        itemStyle: {
                            normal: {
                                color: '#5fc77a'
                            }
                        }
                    },
                    {
                        value: 2,
                        name: '和平桥街道统计站',
                        itemStyle: {
                            normal: {
                                color: '#8dc3e9'
                            }
                        }
                    },
                    {
                        value: 1,
                        name: '城东街道统计站',
                        itemStyle: {
                            normal: {
                                color: '#fbba7e'
                            }
                        }
                    },
                    {
                        value: 9,
                        name: '钟秀街道统计站',
                        itemStyle: {
                            normal: {
                                color: '#c2e1f6'
                            }
                        }
                    },
                    {
                        value: 25,
                        name: '南通崇川经济开发区',
                        itemStyle: {
                            normal: {
                                color: '#ebeb89'
                            }
                        }
                    },
                    {
                        value: 32,
                        name: '观音山街道统计站',
                        itemStyle: {
                            normal: {
                                color: '#54b8e9'
                            }
                        }
                    },
                    {
                        value: 7,
                        name: '文峰街道统计站 ',
                        itemStyle: {
                            normal: {
                                color: '#6988d2'
                            }
                        }
                    },
                    {
                        value: 25,
                        name: '狼山镇街道统计站 ',
                        itemStyle: {
                            normal: {
                                color: '#9fd46c'
                            }
                        }
                    }
                ]
            }
        ]
    };
    var option3 = {
        color: ['#db9e1b'],
        title: {
            text: '崇川区统计局',
            subtext: '注：其他统计机构无效',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            name: '机构',
            type: 'category',
            data: ['学田街道', '虹桥街道', '任港街道', '和平桥街道', '城东街道', '钟秀街道', '南通崇川区', '观音山街道', '文峰街道', '狼山镇街道'],
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {onZero: false}
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            name: '指标值',
            max: 40,
            min: 0,
            interval: 8
        },
        series: [
            {
                name: '3的指数',
                type: 'line',
                symbolSize: 10,
                data: [5, 2, 16, 2, 1, 9, 25, 32, 7, 25]
            }
        ]
    };


    myChart1.setOption(option);
    myChart2.setOption(option2);
    myChart3.setOption(option3);

    function changeEchart(a) {
        var m = parseInt(a.selectedIndex) + 1;
        document.getElementById("main1").style.display = "none";
        document.getElementById("main2").style.display = "none";
        document.getElementById("main3").style.display = "none";
        document.getElementById("main" + m).style.display = "block";

    }
</script>
</body>
</html>